<template>
  <!-- 抢单大厅或订单列表 -->
  <div class="order-center">
    <heads title="分类"></heads>

    <div class="main-content">
      <van-tree-select
        height="100%"
        :items="leftList"
        :main-active-index.sync="leftActive"
      >
        <template #content>
          <van-loading size="24px" v-if="isLoading">加载中...</van-loading>
          <div v-for="(item,index) in rightList" :key="index">
             <!-- is-link value="更多" :to="{path:'/index',query:{}}"  -->
             <van-cell :title="item.name" />
                <van-grid :column-num="3" :border="false">
                  <van-grid-item
                    v-for="(itemList,itemIndex) in item.child" 
                    :key="itemIndex"
                    :icon="itemList.banner"
                    :text="itemList.name"
                    @click="jump(itemList)"
                  />
                </van-grid>
          </div>
        </template>
        <van-empty
          v-if="!isLoading && rightList.length <= 0"
          description="没有更多数据了~"
        />
        
      </van-tree-select>
    </div>

    <foots :active="1"></foots>
  </div>
</template>

<script>
import Vue from "vue";
import { Area } from "vant";
import { Toast, Popup, Picker, Search, Loading, Dialog } from "vant";
import adressList from "@/js/json/area.js";
import * as Config from "@/js/common/config";
import { mapState } from "vuex";
Vue.use(Area, Popup, Picker, Loading);
export default {
  components: {
    heads: resolve => require(["@/components/common/heads"], resolve),
    foots: resolve => require(["@/components/common/foots"], resolve),
    Cell: resolve => require(["@/components/common/cell-order"], resolve)
  },
  data() {
    return {
      isLoading: true,
      leftActive: 0,
      leftValue: '',
      leftList: [],// 左侧一级
      rightList:[],// 右侧二级
    };
  },
  watch: {
    leftActive:{
       handler(newVal,oldVal){
          window.scrollTo(0,0);
        this.getData()
      },
      immediate:true
    },
    leftValue:{
      handler(newVal,oldVal){
         window.scrollTo(0,0);
        this.rightList = []
        this.getChildData({"parentId":newVal})
      }
    }
  },
  computed: {
    ...mapState(["roles"])
  },
  methods: {
    // 类别修改
    typeChange(e) {
      console.log(e);
    },
    //获取一级数据
    getData(_params) {
      let _this = this;
      this.isLoading = true;

      this.$ajax
        .post(`${this.$baseUrl}/portal/infoTypes/getChildNodes`, {"parentId": 0})
        .then(function(res) {
          _this.isLoading = false;
          if (res.data.code == 200) {
            // 一级
              res.data.data.map((item,index) => {
              item.text = item.name
            })
            _this.leftList = res.data.data;
            _this.leftValue = res.data.data[_this.leftActive].infoTypeId
           
          }
       
        })
        .catch(function(error) {
          _this.isLoading = false;

          console.log(error);
        });
    },
     //获取二级数据
    getChildData(_params) {
      let _this = this;
      this.isLoading = true;

      this.$ajax
        .post(`${this.$baseUrl}/portal//infoTypes/getAllLowerInfoType`, _params)
        .then(function(res) {
          _this.isLoading = false;
          if (res.data.code == 200) {
            _this.rightList = res.data.data;
            
          }
        
        })
        .catch(function(error) {
          _this.isLoading = false;

          console.log(error);
        });
    },

     jump(data) {
      this.$router.push({path: `/index`,query:{infoTypeId:data.infoTypeId}});
      // this.$router.push({name: `orderDetail`,params:{id:data.detailId,issueId:data.issueId}});
    }
  },
  created() {
    
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.order-center {
  .nav-box {
    position: fixed;
    width: 100%;
    left: 0;
    top: 1rem;
    z-index: 2;
  }
  .nav-place-holder {
    width: 100%;
    height: 1.7rem;
  }
  .main-content {
    min-height: 71vh;
  }
  /deep/ .van-dropdown-menu {
    position: fixed;
    top: 1.7rem;
    width: 100%;
    left: 0;
    z-index: 1;
  }
  .main-content {
    min-height: 92vh;
    margin-top: 0.3rem;

    box-sizing: border-box;
  }
  .van-tree-select{
min-height: 92vh;
  }
  /deep/ .van-search {
    padding: 0 0.3rem;
    box-sizing: border-box;
    .van-search__content {
      padding: 0.1rem 0.3rem;
      font-size: 0.3rem;
      background: #f7f7f7;
      color: #999;
      box-sizing: border-box;
      border-radius: 0.3rem;
    }
  }
  .van-cell__title{
    text-align: left
  }
  

  // .head-nav {
  //   background: #fff;
  //   font-size: 0.28rem;
  //   color: #1c1c1c;
  //   padding: 0.3rem;
  //   box-sizing: border-box;
  //   .nav-item {
  //     &.active {
  //       color: #1ba447;
  //       &:after {
  //         border-color: #1ba447 transparent transparent transparent;
  //       }
  //     }
  //     &:after {
  //       display: inline-block;
  //       content: "";
  //       border-width: 6px 4px 0 4px;
  //       border-style: solid;
  //       border-color: #000 transparent transparent transparent;
  //       vertical-align: middle;
  //       margin-left: 3px;
  //     }
  //   }
  // }
}
</style>
